<template>
    <div class="newtag-box">
        <h3>新建标签</h3>
        <div class="close" @click="closeDialog">
            <Icon name="close"/>
        </div>
        <div class="labelname-box">
            <span>标签名：</span>
            <input type="text" name="labelname" class="labelname" v-model="defaultInfo.desc" >
        </div>
        <div class="labeltype-box">
            <span>标签类型：</span>
            <label for="out">
                <input type="radio" id="out" name="labeltype" :value="1" checked v-model="defaultInfo.type">支出
            </label>
            <label for="in">
                <input type="radio" id="in" name="labeltype" :value="2" v-model="defaultInfo.type">收入
            </label>
        </div>
        <ul class="icons">
            <li v-for="(item,index) in icons" :key="index" @click="selectIcon(index)"
                :class="{selected:indexNow === index}">
                <Tag  :name="item"/>
            </li>
        </ul>
        <button id="confirm" @click ="confirm">确定</button>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component,Prop} from 'vue-property-decorator';
    import Icon from '@/components/Icon.vue';


    @Component({components:{Icon}})
    export default class NewTagDialog extends Vue {
        @Prop() defaultInfo!: TagItem;
        @Prop() indexNow:number = -1;
        icons: string[]= ['gongzi','gupiao','linghuaqian','hongbao','jianzhi'];

        // 0.关闭当前弹窗
        closeDialog(){
            this.$emit('update:value',false);
        };

        // 1.选择标签
        selectIcon(index:number){
            this.defaultInfo.iconstr = this.icons[index];
            this.$emit('update:indexNow',index)
        };


        // 2.确认添加当前创建的标签
        confirm(){
            // this.defaultInfo.label = this.newLabelName;
            
            // 点击确定后，可见设为false
            this.$emit('update:value',false);

            // 与此同时触发外部的事件将此defaultInfo保存到tagList中
            this.$emit('confirm',this.defaultInfo)
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";
    .newtag-box {
        position: relative;
        border:1px solid #ccc;
        border-radius: 20px;
        background-color:$color-bgc;
        h3 {
            margin-top: 10px;
            font-weight: 400;
        }
        .close {
            position: absolute;
            top: 10px;
            right: 10px;
            svg {
                width: 24px;
                height: 24px;
            }
        }
        .labelname-box {
            margin-top: 20px;
            .labelname {
                border-bottom: 1px solid #ccc;
                border-radius: 0;
                width: 120px;
                font-size: inherit;
                padding:5px 10px;
            }
        }
        .labeltype-box{
            margin-top: 15px;
            label {
                margin:0 5px;
                input{
                    margin-right: 6px;
                }
            }
        }
        .icons {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin: 15px 10px;
            li {
                width: 18%;
                border:1px solid $color-bgc;
                padding-bottom: 3px;
                &.selected{
                    border:1px solid $color-highlight;
                    border-radius: 5px;
                }
            }
        }
        #confirm {
            border-radius: 10px;
            padding:10px 24px;
            font-size: 16px;
            color: $color-bgc;
            background-color: $color-highlight;
            margin: 20px auto;
        }

    }
</style>